<template>
  <div class="calendar-container">
    <FullCalendar :options="calendarOptions">
      <template v-slot:eventContent="arg">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-icon><TakeawayBox /></el-icon>
            {{ arg.event.extendedProps?.material?.code }}|{{ arg.event.extendedProps?.material?.name }}</el-col
          >
          <el-col :span="4"
            ><el-divider direction="vertical"></el-divider><el-icon><Download /></el-icon
            >{{ arg.event.extendedProps.forecastIn }}</el-col
          >
          <el-col :span="4"
            ><el-divider direction="vertical"></el-divider> <el-icon><Upload /></el-icon>
            {{ arg.event.extendedProps.forecastOut }}</el-col
          >
        </el-row>
      </template>
    </FullCalendar>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { CalendarOptions } from '@fullcalendar/core'
import FullCalendar from '@fullcalendar/vue3'
import listPlugin from '@fullcalendar/list'
import { useDbStore } from '@/stores/modules/database'
import type { bd_material } from '@/types/basedata'
import { format } from 'date-fns'
import { compare_obj } from '@/utils/common'
const makeEvent = () => {
  const db = useDbStore()
  const require = db.require_order
  const stock = db.stockorder
  const event: { title: string; start: string; material: string | bd_material; forecastIn: number; forecastOut: number }[] = []
  require.forEach((r) => {
    const exists = event.find((s) => compare_obj(s.material, r.material, 'code') && s.start === r.plan_demand_date)
    if (exists) {
      exists.forecastOut += r.order_qty - r.stockout_qty
    } else {
      event.push({
        title: '',
        start: r.plan_demand_date,
        material: r.material,
        forecastOut: r.order_qty - r.stockout_qty,
        forecastIn: 0
      })
    }
  })
  stock.forEach((r) => {
    const exists = event.find((s) => compare_obj(s.material, r.material, 'code') && s.start === r.plan_arrive_date)
    if (exists) {
      exists.forecastIn += r.order_qty - r.arrived_qty
    } else {
      event.push({
        title: '',
        start: r.plan_arrive_date,
        material: r.material,
        forecastIn: r.order_qty - r.arrived_qty,
        forecastOut: 0
      })
    }
  })
  event.forEach((r) => {
    if (typeof r.material === 'string') r.material = db.material.find((s) => s.code === r.material)!
  })
  return event
}
//const events =
const calendarOptions = ref<CalendarOptions>({
  plugins: [listPlugin],
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: ''
  },
  initialView: 'listWeek',
  events: [],
  allDayContent: '',
  buttonText: {
    today: '本周'
  },
  height: '100%',
  titleFormat: (date) => {
    const st = date.start
    const ed = date.end
    return `${st.month + 1}月${st.day}日 至 ${ed!.month + 1}月${ed!.day}日`
  },
  listDayFormat: (d) => {
    const st = d.start
    const dt = new Date(`${st.year}-${st.month + 1}-${st.day}`)
    const s = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    return s[dt.getDay()]
  },
  listDaySideFormat: (date) => {
    const st = date.start
    return `${st.month + 1}月${st.day}日`
  },
  eventDidMount: function (info) {
    if (info.event.start!.toString().localeCompare(format(new Date(), 'yyyy-MM-dd'))) {
    }
  },
  weekends: true
})
onMounted(() => {
  const events = makeEvent()
  console.log(events)

  calendarOptions.value.events = events
})
</script>
<style>
.calendar-container {
  width: 100%;
  height: 100%;
}
</style>
